<template>
  <div class="box">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first">
          <el-button style="margin:10px 0" type="primary" size="mini" @click="addRoleManagement">新增角色</el-button>
          <!-- 表格 -->
          <el-table
            :data="tableData.rows"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              type="index"
              :index=" dataPage.page > 1 ? (dataPage.page - 1) * dataPage.pagesize + 1 : 1"
              label="序号"
              width="180"
            />
            <el-table-column
              label="角色"
              width="180"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="description"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="handlePermissions(scope.row.id)"
                >分配权限</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEdit(scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div style="display:flex; justify-content:space-between;">
            <div />
            <el-pagination
              :page-size="dataPage.pagesize"
              layout="prev, pager, next"
              :total="tableData.total"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加和编辑的对话框 -->
    <el-dialog :title="isEditor ? '编辑' : '添加'" :visible.sync="dialogTableVisible">
      <a-dialog
        v-if="dialogTableVisible"
        :dialog-table-visible.sync="dialogTableVisible"
        :is-editor="isEditor"
        :row="row"
        @success="getRoleManagement"
      />
    </el-dialog>
    <!-- 分配权限的对话框 -->
    <el-dialog title="分配权限" :visible.sync="dialogTableVisible1">
      <SetPermissions
        v-if="dialogTableVisible1"
        ref="permissions"
        :dialog-table-visible1.sync="dialogTableVisible1"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getRoleManagement, delRoleManagement } from '@/api/setting'
import SetPermissions from './setPermissions.vue'

import ADialog from './dialog.vue'

export default {
  components: {
    ADialog,
    SetPermissions
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      dataPage: {
        page: 1,
        pagesize: 2
      },
      isEditor: false,
      dialogTableVisible: false,
      dialogTableVisible1: false,
      row: ''
      // index: 1
    }
  },

  created() {
    this.getRoleManagement()
  },

  methods: {
    // 调用接口  获取所有角色列表
    async getRoleManagement() {
      const res = await getRoleManagement(this.dataPage)
      // this.dataPage.page > 1 && (this.index = (this.dataPage.page - 1) * this.dataPage.pagesize + 1)
      // console.log(this.index, this.dataPage)
      if (res.code === 10000) {
        this.tableData = res.data
      }
    },
    // 添加
    addRoleManagement() {
      this.dialogTableVisible = true
      this.isEditor = false
    },
    //
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 编辑
    handleEdit(row) {
      this.row = row
      this.isEditor = true
      this.dialogTableVisible = true
    },
    // 删除
    async handleDelete(id) {
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (res === 'confirm') {
        const resolve = await delRoleManagement(id)
        if (resolve.code === 10000) {
          this.$message.success('删除成功！')
          this.getRoleManagement()
        }
      }
    },
    // 修改当前页  发请求
    handleCurrentChange(val) {
      this.dataPage.page = val
      this.getRoleManagement()
    },

    // 分配权限
    async handlePermissions(id) {
      this.dialogTableVisible1 = true
      // this.$refs.SetPermissions.id = id
      await this.$nextTick()
      this.$refs.permissions.id = id
    }
  }
}
</script>
<style lang='scss'  scoped>
.box {
  padding: 20px;
}
</style>
